<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      size="small"
      :inline="true"
      v-show="showSearch"
    >
      <el-form-item label="标题" prop="title">
        <el-input
          v-model="queryParams.title"
          placeholder="请输入标题"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button
        >
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="toAdd"
          >新增</el-button
        >
      </el-col>
    </el-row>

    <div class="project-grid-container">
      <div class="project-grid-view">
        <div
          v-for="template in templateDataList"
          :key="template.projectId"
          class="project-template-view"
        >
          <img
            :src="require('@/assets/images/zhidu.png')"
            style="width: 100%; height: 162px"
          />
          <p class="project-template-title">
            {{ template.title }}
          </p>
          <div class="project-template-use-view">
            <div class="project-template-use-view-btn">
              <el-button
                icon="el-icon-edit"
                class="button-class"
                type="text"
                @click="handleUpdate(template)"
                >编辑</el-button
              >
              <el-button
                icon="el-icon-delete"
                class="button-class"
                type="text"
                @click="handleDelete(template)"
                >删除</el-button
              >
              <br />
              <el-button
                icon="el-icon-view"
                class="button-class"
                type="text"
                @click="toView(template)"
                >查看</el-button
              >
            </div>
          </div>
        </div>
      </div>
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </div>

    <!-- 添加或修改岗位对话框 -->
    <el-dialog
      :title="title"
      :visible.sync="visible"
      width="850px"
      append-to-body
    >
      <el-form
        ref="form"
        :model="form"
        :rules="rules"
        :label-width="openType != 'view' ? '80px' : '0px'"
      >
        <el-form-item v-show="openType != 'view'" label="标题" prop="title">
          <el-input v-model="form.title" placeholder="请输入标题" />
        </el-form-item>
        <el-form-item :label="openType == 'view' ? '' : '内容'">
          <Wangeditor
            ref="Wangeditor"
            v-model="form.txt"
            :wangeditorConfig="wangeditorConfig"
          />
        </el-form-item>
        <el-form-item v-show="openType != 'view'" label="附件">
          <file-upload
            url="/prod-api/system/user/profile/avatar/local"
            :formData="form"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          v-show="openType != 'view'"
          @click="submitForm"
          >立即提交</el-button
        >
        <el-button @click="cancel" v-show="openType != 'view'">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  institution,
  institutionList,
  updateInstitution,
  deleteInstitution,
} from "@/api//register/appoint.js";
import FileUpload from "@/components/FileUpload2";
import Wangeditor from "@/components/Wangeditor";
export default {
  name: "Post",
  components: {
    Wangeditor,
    FileUpload,
  },
  dicts: ["sys_normal_disable"],
  data() {
    return {
      menus: [
        "head", // 标题
        "bold", // 粗体
        "italic", // 斜体
        "underline", // 下划线
        "strikeThrough", // 删除线
        "fontName", // 字体
        "fontSize", // 字号
        "foreColor", // 文字颜色
        "backColor", // 背景颜色
        "link", // 插入链接
        "list", // 列表
        "justify", // 对齐方式
        "quote", // 引用
        "emoticon", // 表情
        "image", // 插入图片
        "table", // 表格
        "video", // 插入视频
        "code", // 插入代码
        "undo", // 撤销
        "redo", // 重做
        "fullscreen", // 全屏
      ], //  头部配置项
      wangeditorConfig: {
        menus: this.menus,
        //高度
        height: 348,
        //配置触发 onchange 的时间频率，默认为 200ms
        onchangeTimeout: 500,
        //图片/视频上传地址
        uploadImgServer: "http://localhost:8080/titleFive/uploadImg",
        //图片参数名称
        uploadFileName: "myFileName",
        //图片大小
        uploadImgMaxSize: 5 * 1024 * 1024,
        //图片一次上传个数 多个图片后端需要做成数组或者集合
        uploadImgMaxLength: 1,
      },
      // 新增还是编辑
      openType: "",
      templateDataList: [
        {
          projectId: "4fbc729992604257ab2361d94c494e6f",
          projectKey: "2023120416004322608",
          projectName: "123123",
          useCount: 0,
          categoryId: "1",
          createTime: "2023-12-04 16:00:44",
          updateTime: "2023-12-06 19:06:38",
          remark: "",
          sort: 0,
          hits: 0,
          statusCode: "FORM_PROJECT_UNPUBLISHED",
          statusName: "未发布",
          statusColor: "#959595",
        },
      ],
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 岗位表格数据
      postList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      visible: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        postCode: undefined,
        title: undefined,
        status: undefined,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        title: [
          { required: true, message: "标题名称不能为空", trigger: "blur" },
        ],
      },
    };
  },
  created() {
    this.getList();
    // this.initEditor();
  },
  methods: {
    initEditor() {
      const editor = new E("#editor");
      editor.config.height = 380;
      editor.config.excludeMenus = ["todo", "video"];
      editor.config.menus = ["head", "bold"];
      editor.create();
      // editor.txt.html(this.form.txt); // 将初始内容设置为Vue组件的数据
    },
    /** 查询岗位列表 */
    getList() {
      this.loading = true;
      institutionList(this.queryParams)
        .then((res) => {
          this.loading = false;
          this.templateDataList = res.rows;
          this.total = res.total;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    // 取消按钮
    cancel() {
      this.visible = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {};
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.postId);
      this.single = selection.length != 1;
      this.multiple = !selection.length;
    },
    // 新增
    toAdd(row) {
      this.visible = true;
      this.openType = "add";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.visible = true;
      this.openType = "edit";
      this.title = "编辑";
      this.wangeditorConfig.menus = this.menus;
      this.$nextTick(() => {
        document.querySelector(".w-e-toolbar").style.display = "flex";
        // Wangeditor设置值
        // 将初始内容设置为Vue组件的数据
        this.$refs.Wangeditor.editor.txt.html(row.txt);
      });
      this.form = JSON.parse(JSON.stringify(row));
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (!valid) return;
        let api = this.openType == "edit" ? updateInstitution : institution;
        api(this.form).then((res) => {
          if (res.code == 200) {
            this.$message({
              type: "success",
              message: this.openType == "edit" ? "修改成功" : "新增成功",
            });
          }
          this.getList();
          this.form = {};
          this.visible = false;
        });
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      deleteInstitution([row.id]).then((res) => {
        this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          this.getList();
        });
        // if (res.code == 200) {
        //   this.$message({
        //     type: "success",
        //     message: "删除成功",
        //   });
        //   this.getList();
        // }
      });
    },
    // 查看
    toView(row) {
      if (row.filePath) {
        window.open(row.filePath);
      } else {
        this.visible = true;
        this.openType = "view";
        this.title = "查看";
        this.$nextTick(() => {
          // this.$refs.editor.querySelector(".w-e-toolbar").style.display ="none"
          document.querySelector(".w-e-toolbar").style.display = "none";
          this.$refs.Wangeditor.editor.txt.html(row.txt);
        });
        // this.wangeditorConfig.menus = [];
        this.form = JSON.parse(JSON.stringify(row));
      }
    },
    /** 导出按钮操作 */
    handleExport() {},
  },
};
</script>
<style lang="scss" scoped>
.project-grid-view {
  display: flex;
  position: relative;
  width: 1450px;
  text-align: center;
  margin: 0 auto;
  flex-direction: row;
  /*横向*/
  align-items: center;
  /*纵轴居中*/
  flex-wrap: wrap;
  clear: both;
}

.project-template-title {
  color: rgba(16, 16, 16, 100);
  font-size: 14px;
  margin: 0 3px;
}

.project-template-view {
  float: left;
  width: 210px;
  height: 200px;
  line-height: 20px;
  border-radius: 10px;
  text-align: center;
  overflow: hidden;
  margin: 20px;
  border: 1px solid rgba(187, 187, 187, 100);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  background: white;
  position: relative;
}

.project-template-view:hover .project-template-use-view {
  display: block;
  cursor: pointer;
}

.project-template-use-view {
  position: absolute;
  width: 100%;
  height: 200px;
  z-index: 100;
  margin: 0;
  padding: 0;
  background-color: #f0f0f0;
  bottom: 0;
  filter: alpha(opacity=90);
  -moz-opacity: 0.9;
  opacity: 0.9;
  display: none;
  border: none;
}

.project-template-use-view-btn {
  margin-top: 30%;
}

.button-class {
  font-size: 18px;
}
</style>
